<template>
<view class="wsy_index_max">
    <scroll-view class="wsy_index_scroll" :scrollIntoView="'nav-' + toabc" scrollTop="0rpx" scroll-y="true" :style="'height:' + max_height + 'px'">
        <view v-for="(item_max, abc) in classes" :key="abc" class="scroll-view-item bc_green" :id="'nav-' + abc" v-if="item_max.length>0">
            <view class="wsy_cars_for_title">{{abc}}</view>
            <view v-for="(items, index) in item_max" :key="index" @tap="backid" class="wsy_cars_for_detail" :data-ids="items.id" :data-name="items.name">
                <image class="wsy_cars_for_img" :src="items.brand_icon"></image>
                <view class="wsy_cars_for_name">{{items.name}}</view>
            </view>
        </view>
    </scroll-view>
    <view class="wsy_cars_abc_list_max">
        <view v-for="(item, index) in classes" :key="index" @tap="retoabc" class="wsy_cars_abc_list" :data-abc="index">{{index}}</view>
    </view>
</view>
</template>

<script>
var app = getApp();

export default {
  data() {
    return {
      toabc: "",
      classes: [],
      max_height: 667,
      abc: ""
    };
  },

  components: {},
  props: {},
  onLoad: function () {
    var t = wx.getSystemInfoSync(),
        e = this;
    app.globalData.util.request({
      url: "entry/wxapp/Api",
      data: {
        m: "monai_market",
        r: "sale.index.carsbrand"
      },
      cachetime: "0",
      success: function (a) {
        console.log(a), e.setData({
          classes: a.data.data,
          max_height: t.windowHeight
        });
      }
    });
  },
  methods: {
    retoabc: function (a) {
      this.setData({
        toabc: a.currentTarget.dataset.abc
      });
    },
    backid: function (a) {
      app.globalData.util.navigateBack({
        data: {
          brandid: a.currentTarget.dataset.ids,
          brandname: a.currentTarget.dataset.name,
          brand_status: 1
        }
      });
    }
  }
};
</script>
<style>
@import "./index.css";
</style>